<template>
	<view class="set">
		<view class="input">
			<input type="text" @input="input" v-model="nickname">
		</view>
		<view class="size" v-if="nickname.length<=16">
			{{lengths}}/16
		</view>
		<view class="size" v-else style="color: red;">
			{{lengths}}/16
		</view>
	</view>
</template>

<script setup>
	import {
		ucInfo,
		ucEdit
	} from '@/api/setuserinfo/setuserinfo.js'
	import {
		onNavigationBarButtonTap,onLoad
	} from "@dcloudio/uni-app"

	import {
		ref,
		computed
	} from "vue";
	import {
		useI18n
	} from "vue-i18n";
	const {
		t
	} = useI18n()
	onLoad((e)=>{
		console.log(e.name);
		nickname.value =e.name
		uni.setNavigationBarTitle({
			title: t('user.setnicknametitle')
		});
	})
	const nickname = ref('')
	const input = () => {

	}
	const lengths = computed(() => {
		return nickname.value.length
	})
	onNavigationBarButtonTap(e => {
		edit()
	})
	const edit = () => {
		if (nickname.value == '') return uni.showToast({
			title: '请填写昵称',
			icon: 'none'
		})
		let data = {
			nickname: nickname.value
		}
		ucEdit(data).then(res => {
			console.log(res);
			if (res.code == 200) {

				uni.showToast({
					title: '修改成功'
				})
				var pages = getCurrentPages(); // 当前页
				var prevPage = pages[pages.length - 2]; //上个页面
				setTimeout(() => {
					uni.navigateBack({
						delta: 1,
						success: () => {
							
						}
					})
				}, 2000)
			}
		})
	}
</script>

<style scoped lang="scss">
	.set {
		width: 100%;
		height: 100vh;
		background: #F2F4F7;
		padding-top: 16rpx;
	}

	.input {
		width: 100%;
		background: #fff;
		padding: 30rpx 32rpx;
	}

	.size {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0px;
		line-height: 19.6px;
		color: rgba(168, 168, 168, 1);
		width: 100%;
		display: flex;
		justify-content: flex-end;
		padding-right: 32rpx;
		padding-top: 20rpx;
	}
</style>